import { NextPage } from "next";
import SearchPage from "../components/SearchPage";
import {
  Button,
  Checkbox,
  Col,
  DatePicker,
  Form,
  Input,
  message,
  Modal,
  Radio,
  Row,
  Select,
  Space,
} from "antd";
import { useQuery } from "@tanstack/react-query";
import { useEffect, useRef, useState } from "react";
import { BusinessItemInfo } from "../types/business";
import ListItm from "../components/ParseTask/ListItm";
import { ContextVal } from "../components/SearchPage/context";
import request from "../utils/request";
import { filter, findIndex, get, map, set } from "lodash";
import Upload from "../components/upload";
import { UploadOutlined } from "@ant-design/icons";
import { useRouter } from "next/router";
import CheckBoxGroup from "../components/CheckBoxGroup";
import { FormInstance } from "antd/es/form/hooks/useForm";
import { addTaskToNewTaskComp, registerCallback } from "../components/NewTask";

let pageCore: ContextVal;

const getPatternList = async () => {
  const data = await request("/task/getPatternList");
  return map(data, (item) => ({
    key: item.id,
    label: item.title,
  }));
};

const ParseTask: NextPage = () => {
  const router = useRouter();
  const [list, setList] = useState<BusinessItemInfo[]>([]);
  const { data: taskOptions = [] } = useQuery({
    queryFn: getPatternList,
  });

  useEffect(() => {
    const interval = setInterval(() => {
      pageCore.query?.mutate?.();
    }, 1000 * 10);

    registerCallback(pageCore.query?.mutate);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <SearchPage
      src="/task/page"
      uploadData={setList}
      breadcrumbList={[
        {
          href: "/parseTask",
          label: "解析任务管理",
        },
      ]}
      onMount={(v) => (pageCore = v)}
    >
      <SearchPage.Search addLabel="新增任务" onAddClick={addTaskToNewTaskComp}>
        <Form.Item label="任务搜索" name="task_name">
          <Input placeholder="请输入任务搜索" />
        </Form.Item>
        <Form.Item label="创建时间" name="time">
          <DatePicker.RangePicker />
        </Form.Item>
        <Form.Item label="任务模型" name="pattern_info">
          <Select
            mode="multiple"
            style={{ width: 200 }}
            placeholder="请选择任务模型"
          >
            {map(taskOptions, (item) => (
              <Select.Option key={item.key}>{item.label}</Select.Option>
            ))}
          </Select>
        </Form.Item>
      </SearchPage.Search>
      <SearchPage.Cont>
        <div className="mt-[-15px]">
          {list.map((item) => (
            <ListItm
              data={item}
              onDelete={async () => {
                await request.delete(`/task/${item.id}`);
                message.success("删除成功").then();
                pageCore.query?.mutate(null);
              }}
              onDetail={() => {
                router.push(`/parseTaskDetail?id=${item.id}`).then();
              }}
            />
          ))}
        </div>
      </SearchPage.Cont>
    </SearchPage>
  );
};

export default ParseTask;
